<template>
  <require from="./process-list.css"></require>
  <require from="../../pagination/pagination"></require>
  <div class="process-list">
    <div class="process-list-container" id="processListContainer">
      <h4 class="process-list-header">Processes</h4>
      <template if.bind="processInstancesToDisplay && processInstancesToDisplay.length > 0 && initialLoadingFinished">
        <h6 class="process-list-total-count">Total: ${activeProcessInstanceCount}</h6>
        <table class="table table-striped table-bordered">
          <tr>
            <th>Started At</th>
            <th>Correlation ID</th>
            <th>Process Model ID</th>
            <th></th>
          </tr>
          <tr repeat.for="processInstance of processInstancesToDisplay" id="processList-${processInstance.correlationId}" class.bind="processInstance.state === 'error' ? 'process-list-item-stopped' : 'process-list-item'">
            <td>${formatDate(processInstance.createdAt)}</td>
            <td>${processInstance.correlationId}</td>
            <td>
              <a route-href="route: design; params.bind: { view: 'detail', diagramName: processInstance.processModelId, solutionUri: activeSolutionEntry.uri }" class="process-list-item-modelname">${processInstance.processModelId}</a>
            </td>
            <td class="process-list__last-table-cell">
              <a if.bind="processInstance.state !== 'error'" route-href="route: task-list-processinstance; params.bind: { processInstanceId: processInstance.processInstanceId, solutionUri: activeSolutionEntry.uri }" class="process-list-item-user-tasks btn btn-default">Tasks</a>
              <a if.bind="processInstance.state !== 'error'" route-href="route: live-execution-tracker; params.bind: { diagramName: processInstance.processModelId, solutionUri: activeSolutionEntry.uri, correlationId: processInstance.correlationId, processInstanceId: processInstance.processInstanceId }" class="btn btn-default">Live Execution Tracking</a>
              <button if.bind="processInstance.state !== 'error'" class="btn btn-default" click.delegate="stopProcessInstance(processInstance)">Stop</button>
            </td>
          </tr>
        </table>
      </template>
      <template if.bind="initialLoadingFinished && processInstancesToDisplay.length == 0">
        <span if.bind="showError" class="process-list__no-processes-text process-list__no-processes-text--error">There was an error while receiving the processes.</span>
        <span else class="process-list__no-processes-text">No process instances found for this user.</span>
      </template>
      <div class="col-md-12 col-xs-12 pagination" show.bind="processInstancesToDisplay && processInstancesToDisplay.length > 0">
        <pagination if.bind="totalItems > pageSize" view-model.ref="pagination" current-page.two-way="currentPage" per-page.to-view="pageSize" items.to-view="totalItems" max-pages-to-display.to-view="paginationSize" content-is-async.bind="true" is-loading.two-way="paginationShowsLoading"></pagination>
      </div>
      <div if.bind="!initialLoadingFinished" class="container">
        <img src="src/resources/images/gears.svg" class="loading-spinner">
      </div>
    </div>
  </div>
</template>
